<template>
    <el-breadcrumb class="vea-breadcrumb">
        <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{name:'friend_link'}">友情链接</el-breadcrumb-item>
        <el-breadcrumb-item>
            {{ routeTitle }}
        </el-breadcrumb-item>
    </el-breadcrumb>
    <el-form class="vea-form" ref="friendLink" label-width="120px" :model="friendLinkFrom">
        <el-form-item label="名称">
            <el-input v-model="friendLinkFrom.name" clearable/>
        </el-form-item>
        <el-form-item label="链接">
            <el-input v-model="friendLinkFrom.link" clearable/>
        </el-form-item>
        <el-form-item label="说明">
            <el-input type="textarea" v-mode="friendLinkFrom.jingle"/>
        </el-form-item>
        <el-form-item label="访问方式">
            <el-radio-group v-model="friendLinkFrom.open_type">
                <el-radio-button label="_self">直接打开</el-radio-button>
                <el-radio-button label="_blank">新窗口打开</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="状态">
            <el-switch inline-prompt inactive-text="关闭" active-text="开启" :active-value="1" :inactive-value="2" v-model="friendLinkFrom.state"/>
        </el-form-item>
        <el-form-item label="logo">
            <el-upload :show-file-list="false" name="friendLink" :data="{file_name:'friendLink'}"
                       :action="uploadImagesPath"
                       :before-upload="beforeAvatarUpload" :on-success="uploadSuccess">
                <el-image :src="logoImage" class="vea-upload-image" v-if="logoImage"/>
                <el-icon v-else class="vea-upload-image vea-upload-icon">
                    <Plus/>
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :loading="loading" @click="save(friendLink)">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import {useRoute} from "vue-router";
import {computed, onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {$ajax, apiUrl, uploadImageUrl} from "@/utils/request";
import router from "@/router";

const route = useRoute()
const routeTitle = computed(() => {
    return route.name === 'friend_link_add' ? "新增链接" : "编辑链接"
})
const friendLink = ref()
const friendLinkFrom = ref({
    id: null,
    name: null,
    logo: null,
    jingle: null,
    open_type: "_self",
    state: 1,
    link: null
})

const uploadImagesPath = ref(`${uploadImageUrl}/image_upload`);
const logoImage = ref(null);
const loading = ref(false)
const save = (refs) => {
    refs.validate(err => {
        loading.value = err
        if (err) {
            $ajax.post(`${apiUrl}/friend_link/save`, friendLinkFrom.value).then(() => {
                loading.value = false
                router.replace({name: "friend_link"})
            }).catch(() => loading.value = false)
        }
    })
}
const beforeAvatarUpload = (rawFile) => {
    if (!/image\/(jpeg|png|gif|jpg)/.test(rawFile.type)) {
        ElMessage.error("仅支持上传jpg/png/gif图片");
        return false;
    }
    return true;
};

const uploadSuccess = (response) => {
    if (response.errorCode !== 0) {
        ElMessage.error({
            message: response.errorMessage
        });
        return;
    }
    logoImage.value = `${uploadImageUrl}${response.result.path}`
    friendLinkFrom.value.logo = response.result.path;
}

onMounted(()=>{
    const id = route.params.id
    if(id){
        $ajax.get(`${apiUrl}/friend_link/one`,{params:{id}}).then(({data:{result}})=>{
            friendLinkFrom.value = result
            if(result.logo){
                logoImage.value = `${uploadImageUrl}${result.logo}`
            }
        })
    }
})

</script>

<style scoped>

</style>
